<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的宠物 - 宠物医院管理系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/css/style.css" rel="stylesheet">
    <style>
        .pet-card {
            transition: all 0.3s ease;
            border: none;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .pet-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 20px rgba(0,0,0,0.15);
        }
        .pet-avatar {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            object-fit: cover;
        }
        .status-badge {
            position: absolute;
            top: 10px;
            right: 10px;
            font-size: 0.8rem;
            padding: 4px 8px;
        }
        .pet-info {
            padding: 20px;
        }
        .search-form {
            background: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <!-- 侧边栏 -->
            <div class="col-md-2 p-0">
                <%@ include file="../common/user-sidebar.jsp" %>
            </div>
            
            <!-- 主内容区 -->
            <div class="col-md-10">
                <div class="main-content p-4">
                    <!-- 页面标题 -->
                    <div class="d-flex justify-content-between align-items-center mb-4">
                        <h2><i class="fas fa-paw me-2"></i>我的宠物</h2>
                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="${pageContext.request.contextPath}/pages/user/dashboard.jsp">首页</a></li>
                                <li class="breadcrumb-item active">我的宠物</li>
                            </ol>
                        </nav>
                    </div>

                    <!-- 提示信息 -->
                    <c:if test="${not empty param.success}">
                        <div class="alert alert-success alert-dismissible fade show" role="alert">
                            <i class="fas fa-check-circle me-2"></i>${param.success}
                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                        </div>
                    </c:if>
                    <c:if test="${not empty param.error}">
                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                            <i class="fas fa-exclamation-circle me-2"></i>${param.error}
                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                        </div>
                    </c:if>

                    <!-- 搜索表单 -->
                    <div class="search-form">
                        <form method="get" action="${pageContext.request.contextPath}/pet/my-pets">
                            <input type="hidden" name="action" value="my-pets">
                            <div class="row g-3">
                                <div class="col-md-4">
                                    <label class="form-label">宠物姓名</label>
                                    <input type="text" class="form-control" name="petName" value="${petName}" placeholder="请输入宠物姓名">
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label">宠物类型</label>
                                    <select class="form-select" name="petType">
                                        <option value="">全部类型</option>
                                        <c:forEach var="type" items="${petTypes}">
                                            <option value="${type}" ${petType == type ? 'selected' : ''}>${type}</option>
                                        </c:forEach>
                                    </select>
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label">健康状态</label>
                                    <select class="form-select" name="status">
                                        <option value="">全部状态</option>
                                        <option value="healthy" ${status == 'healthy' ? 'selected' : ''}>健康</option>
                                        <option value="sick" ${status == 'sick' ? 'selected' : ''}>生病</option>
                                        <option value="treatment" ${status == 'treatment' ? 'selected' : ''}>治疗中</option>
                                    </select>
                                </div>
                            </div>
                            <div class="row mt-3">
                                <div class="col-12">
                                    <button type="submit" class="btn btn-primary">
                                        <i class="fas fa-search me-2"></i>搜索
                                    </button>
                                    <a href="${pageContext.request.contextPath}/pet/my-pets?action=my-pets" class="btn btn-outline-secondary ms-2">
                                        <i class="fas fa-undo me-2"></i>重置
                                    </a>
                                    <a href="${pageContext.request.contextPath}/pages/user/pet-add.jsp" class="btn btn-success ms-2">
                                        <i class="fas fa-plus me-2"></i>添加宠物
                                    </a>
                                </div>
                            </div>
                        </form>
                    </div>

                    <!-- 宠物列表 -->
                    <c:choose>
                        <c:when test="${empty pageResult.data}">
                            <div class="text-center py-5">
                                <i class="fas fa-paw fa-5x text-muted mb-4"></i>
                                <h4 class="text-muted">还没有宠物档案</h4>
                                <p class="text-muted">点击下方按钮为您的爱宠建立档案吧</p>
                                <a href="${pageContext.request.contextPath}/pages/user/pet-add.jsp" class="btn btn-primary btn-lg">
                                    <i class="fas fa-plus me-2"></i>添加第一个宠物
                                </a>
                            </div>
                        </c:when>
                        <c:otherwise>
                            <div class="row">
                                <c:forEach var="pet" items="${pageResult.data}">
                                    <div class="col-md-6 col-lg-4 mb-4">
                                        <div class="card pet-card h-100">
                                            <div class="position-relative">
                                                <span class="badge status-badge 
                                                    ${pet.status == 'healthy' ? 'bg-success' : 
                                                      pet.status == 'sick' ? 'bg-danger' : 'bg-warning'}">
                                                    ${pet.statusDisplay}
                                                </span>
                                                <div class="pet-info text-center">
                                                    <c:choose>
                                                        <c:when test="${not empty pet.photoUrl}">
                                                            <img src="${pageContext.request.contextPath}${pet.photoUrl}" 
                                                                 alt="${pet.petName}" class="pet-avatar mb-3">
                                                        </c:when>
                                                        <c:otherwise>
                                                            <div class="pet-avatar bg-light d-flex align-items-center justify-content-center mx-auto mb-3">
                                                                <i class="fas fa-paw fa-2x text-muted"></i>
                                                            </div>
                                                        </c:otherwise>
                                                    </c:choose>
                                                    
                                                    <h5 class="card-title">
                                                        ${pet.petName}
                                                        <c:if test="${pet.gender == 'male'}">
                                                            <i class="fas fa-mars text-primary ms-1" title="雄性"></i>
                                                        </c:if>
                                                        <c:if test="${pet.gender == 'female'}">
                                                            <i class="fas fa-venus text-danger ms-1" title="雌性"></i>
                                                        </c:if>
                                                    </h5>
                                                    
                                                    <div class="row text-center mb-3">
                                                        <div class="col-6">
                                                            <small class="text-muted">类型</small>
                                                            <div class="fw-bold">${pet.petType}</div>
                                                        </div>
                                                        <div class="col-6">
                                                            <small class="text-muted">品种</small>
                                                            <div class="fw-bold">${not empty pet.breed ? pet.breed : '未知'}</div>
                                                        </div>
                                                    </div>
                                                    
                                                    <div class="row text-center mb-3">
                                                        <div class="col-6">
                                                            <small class="text-muted">年龄</small>
                                                            <div class="fw-bold">
                                                                <c:choose>
                                                                    <c:when test="${not empty pet.age}">
                                                                        ${pet.ageDisplay}
                                                                    </c:when>
                                                                    <c:otherwise>未知</c:otherwise>
                                                                </c:choose>
                                                            </div>
                                                        </div>
                                                        <div class="col-6">
                                                            <small class="text-muted">体重</small>
                                                            <div class="fw-bold">
                                                                <c:choose>
                                                                    <c:when test="${not empty pet.weight}">
                                                                        ${pet.weight}kg
                                                                    </c:when>
                                                                    <c:otherwise>未知</c:otherwise>
                                                                </c:choose>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    
                                                    <c:if test="${not empty pet.color}">
                                                        <p class="text-muted mb-3">
                                                            <i class="fas fa-palette me-1"></i>${pet.color}
                                                        </p>
                                                    </c:if>
                                                    
                                                    <div class="btn-group w-100">
                                                        <a href="${pageContext.request.contextPath}/pet/view?action=view&id=${pet.petId}" 
                                                           class="btn btn-outline-info btn-sm">
                                                            <i class="fas fa-eye"></i> 查看
                                                        </a>
                                                        <a href="${pageContext.request.contextPath}/pet/edit?action=edit&id=${pet.petId}" 
                                                           class="btn btn-outline-primary btn-sm">
                                                            <i class="fas fa-edit"></i> 编辑
                                                        </a>
                                                        <button type="button" class="btn btn-outline-danger btn-sm" 
                                                                onclick="deletePet(${pet.petId}, '${pet.petName}')">
                                                            <i class="fas fa-trash"></i> 删除
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </c:forEach>
                            </div>
                        </c:otherwise>
                    </c:choose>

                    <!-- 分页 -->
                    <c:if test="${pageResult.totalPages > 1}">
                        <nav class="mt-4">
                            <ul class="pagination justify-content-center">
                                <li class="page-item ${pageResult.hasPrevious ? '' : 'disabled'}">
                                    <a class="page-link" href="?action=my-pets&page=${pageResult.currentPage - 1}&petName=${petName}&petType=${petType}&status=${status}">
                                        <i class="fas fa-chevron-left"></i>
                                    </a>
                                </li>
                                
                                <c:forEach begin="1" end="${pageResult.totalPages}" var="i">
                                    <c:if test="${i <= 5 || i > pageResult.totalPages - 5 || (i >= pageResult.currentPage - 2 && i <= pageResult.currentPage + 2)}">
                                        <li class="page-item ${i == pageResult.currentPage ? 'active' : ''}">
                                            <a class="page-link" href="?action=my-pets&page=${i}&petName=${petName}&petType=${petType}&status=${status}">${i}</a>
                                        </li>
                                    </c:if>
                                </c:forEach>
                                
                                <li class="page-item ${pageResult.hasNext ? '' : 'disabled'}">
                                    <a class="page-link" href="?action=my-pets&page=${pageResult.currentPage + 1}&petName=${petName}&petType=${petType}&status=${status}">
                                        <i class="fas fa-chevron-right"></i>
                                    </a>
                                </li>
                            </ul>
                            <div class="text-center text-muted">
                                ${pageResult.pageInfo}
                            </div>
                        </nav>
                    </c:if>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 删除宠物
        function deletePet(petId, petName) {
            if (confirm('确定要删除宠物 "' + petName + '" 吗？此操作不可恢复！')) {
                window.location.href = '${pageContext.request.contextPath}/pet/delete?action=delete&id=' + petId;
            }
        }
    </script>
</body>
</html>
